<template>
    <div class="page-layout">
        <nav v-if="hasNavbarSlot">
            <slot name="navbar"/>
        </nav>
        <header>
            <slot name="header"/>
        </header>
        <main :class="[hasFooterSlot || 'no-footer']">
            <slot/>
        </main>
        <footer v-if="hasFooterSlot">
            <slot name="footer"/>
        </footer>
    </div>
</template>

<script setup>
import { useSlots } from "vue";

const slot = useSlots()
const hasFooterSlot = !!slot.footer
const hasNavbarSlot = !!slot.navbar
</script>

<style lang="less">
@import "../style/common.less";
.page-layout {
    display: block;
    position: relative;
    height: 100%;
    overflow-x: hidden;
    >nav {
        height: 80px;
        
      
        
    }
    > header {
        margin-top: 10px;
        height: 49px;
        border-bottom: solid 1px @cd;
        padding: 10px 12px;
        text-align: right;
        background-color: #f2f5ff;
       
        border-radius: 8px;
        .el-input {
            width: 220px;
        }
        .el-input,
        .el-button {
            margin-left: 12px;
        }
    }
    > main {
        margin-top: 10px;
        height: calc(100% - 49px - 41px -80px);
        overflow-x: hidden;
        padding: 12px;
        background-color: #f2f5ff;;
        border-radius: 20px;
        &.no-footer {
            height: calc(100% - 49px);
        }
        .table-btn {
            display: inline-block;
            width: 40px;
            line-height: 23px;
            text-align: center;
            font-size: .7rem;
            margin: 0 6px;
            .touch();
        }
    }
    > footer {
        height: 41px;
        padding: 8px 12px;
    }
}
</style>